<template>
  <div class="tnaot">
    <IndexHeader :isIndex="true" :showLang="true" />
    <Tabs :channelList="channelList" />
    <div class="Banner">
      <Banner
        v-if="JSON.stringify(banner) != '{}' && banner != null"
        :banner="banner"
      />
    </div>
    <div v-for="(item, index) in news" :key="'top-' + index">
      <NuxtLink
        v-if="item.news_type === 1 && item.is_top === 1"
        :to="$i18n.path(`m/detail/article/${item.news_id}`)"
        exact
      >
        <Top :top="item" />
      </NuxtLink>
      <NuxtLink
        v-if="item.news_type === 2 && item.is_top === 1"
        :to="$i18n.path(`m/detail/gallery/${item.news_id}`)"
        exact
      >
        <Top :top="item" />
      </NuxtLink>
      <NuxtLink
        v-if="item.news_type === 3 && item.is_top === 1"
        :to="$i18n.path(`m/detail/video/${item.news_id}`)"
        exact
      >
        <Top :top="item" />
      </NuxtLink>
    </div>
    <van-list
      v-if="news && news.length > 0"
      v-model="loading"
      :finished="finished"
      :error.sync="error"
      :error-text="$t('Request_failed_click_to_upload_again')"
      :finished-text="$t('No_more')"
      @load="getList"
      :immediate-check="false"
    >
      <div v-for="(item, index) in news" :key="index">
        <NuxtLink
          v-if="item.news_type === 1 && item.is_top != 1"
          :to="$i18n.path(`m/detail/article/${item.news_id}`)"
          exact
        >
          <Item :news="item" />
        </NuxtLink>
        <NuxtLink
          v-if="item.news_type === 2 && item.is_top != 1"
          :to="$i18n.path(`m/detail/gallery/${item.news_id}`)"
          exact
        >
          <Item :news="item" />
        </NuxtLink>
        <NuxtLink
          v-if="item.news_type === 3 && item.is_top != 1"
          :to="$i18n.path(`m/detail/video/${item.news_id}`)"
          exact
        >
          <Item :news="item" />
        </NuxtLink>
      </div>
    </van-list>
    <div class="no-data" v-if="news && news.length < 1">
      {{ $t('No_more') }}
    </div>
  </div>
</template>

<script>
import IndexHeader from '@/components/m/Header.vue';
import Tabs from '@/components/m/Tabs.vue';
import Banner from '@/components/m/Banner.vue';
import Top from '@/components/m/Top.vue';
import Item from '@/components/m/item.vue';
import { mapState } from 'vuex';

export default {
  components: {
    IndexHeader,
    Tabs,
    Banner,
    Top,
    Item
  },

  data() {
    return {
      channelList: [], //频道列表
      banner: {}, //
      news: [], //资讯列表
      loading: false, //列表加载
      finished: false, //列表加载完毕
      error: false, //列表加载错误
      lastnewsTime: '' //本页一条新闻的时间戳
    };
  },

  head() {
    /* 动态配置title,meta，便于facebook爬虫 */
    return {
      title: this.$t('tnaot_title'),
      meta: [
        {
          property: 'og:image',
          content: 'https://m.tnaot.com/img/logo-256.png'
        },
        { property: 'og:title', content: this.$t('tnaot_title') },
        { name: 'keywords', content: this.$t('indexKeywords') },
        { name: 'description', content: this.$t('indexDescription') }
      ]
    };
  },

  async asyncData(ctx) {
    try {
      const banner_channel = await ctx.$axios.$get(
        `/article/get_banner_channel?imageType=0`
      );
      ctx.store.commit('SET_CHANNEL', banner_channel.result.channel_list[0].id);
      const { result } = await ctx.$axios.$get(
        `/article/get_channel_list?channelId=${banner_channel.result.channel_list[0].id}`
      );
      ctx.store.commit('SET_NEWS_LIST', result);
      return {
        channelList: banner_channel.result.channel_list,
        banner: banner_channel.result.banner_list,
        news: result,
        lastnewsTime: result[result.length - 1].release_timestamp
      };
    } catch (err) {
      console.log(err);
      ctx.error({ statusCode: 404, message: '网络异常，请重试！' });
    }
  },

  computed: {
    ...mapState(['channel', 'channels', 'newsList'])
  },

  watch: {
    async channel() {
      //store中是否含有当前tab的数据
      var hasNews = this.newsList.some(item => {
        if (item.channelId == this.channel) {
          this.news = item.news;
          return true;
        }
      });

      if (!hasNews) {
        const { result } = await this.$axios.$get(
          `/article/get_channel_list?channelId=${this.channel}`
        );
        this.news = result;
        this.$store.commit('SET_NEWS_LIST', result);
      }
    }
  },

  methods: {
    async getList() {
      const res = await this.$axios.$get(
        `/article/get_channel_list?channelId=${this.channel}&lastReleaseTime=${this.lastnewsTime}`
      );
      this.loading = false;
      if (res.result.length > 0) {
        this.news = this.news.concat(res.result);
        this.lastnewsTime = this.news[this.news.length - 1].release_timestamp;
      } else {
        this.finished = true; // 若数据已全部获取完毕
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.tnaot {
  font-size: 30px;
  background-color: #fff;
  .Banner {
    padding-top: 180px;
    margin-top: 32px;
  }
  .no-data {
    text-align: center;
    color: rgba(12, 12, 28, 0.7);
  }
}
</style>
